<template>
    <div class="page-center">
        <common-product-list :product-list="productList"></common-product-list>
        <div class="pagination clearfix">
            <el-pagination background layout="pager, next" :total="total" @current-change="handleCurrentChange">
            </el-pagination>
            <p class="total">
                总共<span>{{ total }}</span
                >条
            </p>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted, defineProps } from 'vue'
import router from '@/router/index'
import CommonProductList from '@/components/CommonProductList.vue'

const props = defineProps({
    keyword: {
        type: String,
        default: '',
    },
})

const productList = ref([])
const total = ref(0)
const filters = ref({
    page: 1,
    size: 100,
    name: router.currentRoute.name, // TODO: 区分几个菜单
    key: props.keyword || undefined, // 搜索时传参
})
onMounted(() => {
    // TODO
    const respose = {
        total: 1000,
        list: [
            {
                id: 1,
                name: '依托考昔杂质14',
                imageUrl: 'https://www.sincopharmachem.com.cn/Images/product/A18443.jpg',
                productId: 'E02291',
                casNo: '855307-79-8',
                formula: 'C18H13ClN2O2S',
                molecularWeight: '356.82',
            },
            {
                id: 2,
                name: '依托考昔杂质15',
                imageUrl: 'https://www.sincopharmachem.com.cn/Images/product/A18443.jpg',
                productId: 'E02291',
                casNo: '855307-79-8',
                formula: 'C18H13ClN2O2S',
                molecularWeight: '356.82',
            },
            {
                id: 3,
                name: '依托考昔杂质16',
                imageUrl: 'https://www.sincopharmachem.com.cn/Images/product/A18443.jpg',
                productId: 'E02291',
                casNo: '855307-79-8',
                formula: 'C18H13ClN2O2S',
                molecularWeight: '356.82',
            },
            {
                id: 4,
                name: '依托考昔杂质17',
                imageUrl: 'https://www.sincopharmachem.com.cn/Images/product/A18443.jpg',
                productId: 'E02291',
                casNo: '855307-79-8',
                formula: 'C18H13ClN2O2S',
                molecularWeight: '356.82',
            },
            {
                id: 5,
                name: '依托考昔杂质18',
                imageUrl: 'https://www.sincopharmachem.com.cn/Images/product/A18443.jpg',
                productId: 'E02291',
                casNo: '855307-79-8',
                formula: 'C18H13ClN2O2S',
                molecularWeight: '356.82',
            },
        ],
    }
    productList.value = respose.list
    total.value = respose.total
})
const handleCurrentChange = (val) => {
    filters.value.page = val
    // TODO
}
</script>
<style lang="scss" scoped>
.pagination {
    margin: 20px 0;
    .el-pagination {
        float: left;

        :deep(.number.active) {
            background-color: #00a0e9 !important;
        }
    }

    .total {
        color: #000;
        font-size: 16px;
        float: right;
    }
}
</style>
